<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="title"
    width="40%">
    <el-form ref="dataForm" :model="form" :rules="rules" label-width="120px">
      <el-form-item :label="this.$t('eqpId')" prop="eqpId">
        <el-select
          v-model="form.eqpId"
          :style="{width: '100%'}"
          :disabled="disabled"
          :placeholder="`${$t('pleaseSelect')}${$t('eqpId')}`">
          <el-option
            v-for="item of eqpIdList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="this.$t('alarmId')" prop="alarmID">
        <el-input
          v-model="form.alarmID"
          :disabled="disabled"
          :placeholder="`${$t('pleaseInput')}${$t('alarmId')}`"
          maxlength="30"
          show-word-limit
          clearable/>
      </el-form-item>
      <el-form-item :label="this.$t('is_collect_alarms')">
        <el-switch
          v-model="form.isSave"
          :active-value="1"
          :inactive-value="2"
          active-color="#13ce66"
          inactive-color="#ff4949"/>
      </el-form-item>
      <el-form-item :label="this.$t('IsSelfAlarm')">
        <el-switch
          v-model="form.isEqpAlarm"
          :active-value="1"
          :inactive-value="2"
          active-color="#13ce66"
          inactive-color="#ff4949"/>
      </el-form-item>
      <el-form-item :label="this.$t('MTBAOrNot')">
        <el-switch
          v-model="form.mtba"
          :active-value="1"
          :inactive-value="2"
          active-color="#13ce66"
          inactive-color="#ff4949"/>
      </el-form-item>
      <el-form-item :label="this.$t('alarmDescription')" prop="alarmDesc">
        <el-input
          :rows="3"
          v-model="form.alarmDesc"
          :placeholder="`${$t('pleaseInput')}${$t('alarmDescription')}`"
          type="textarea"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button v-btnThrottle="doSave" type="primary" icon="el-icon-receiving">{{
        $t("save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { eqpnamelist } from '@/api/equipment/eqpbase'
import { getAllLevel } from '@/api/alarm/level'
import { doUpdate, doAdd, getInfo } from '@/api/alarm/codeMaintain'
export default {
  name: 'CodeMaintainForm',
  data() {
    return {
      dialogVisible: false,
      title: '',
      form: {
        isSave: 1
      },
      disabled: false,
      rules: {
        eqpId: [{ required: true, message: `${this.$t('pleaseSelect')}${this.$t('eqpId')}`, trigger: 'change' }],
        alarmID: [{ required: true, message: `${this.$t('pleaseInput')}${this.$t('alarmId')}`, trigger: 'blur' }],
        alarmDesc: [{ required: true, message: `${this.$t('pleaseInput')}${this.$t('alarmDescription')}`, trigger: 'blur' }]
      },
      eqpIdList: []
    }
  },
  methods: {
    doSave() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            doUpdate(this.$clearNull(this.form)).then(res => {
              this.$betterTips(res, this.handleUpdate, this.handleClose)
            })
          } else {
            doAdd(this.$clearNull(this.form)).then(res => {
              this.$betterTips(res, this.handleUpdate, this.handleClose)
            })
          }
        }
      })
    },
    async handleOpen(row) {
      if (row && row.id) {
        const res = await getInfo({ id: row.id })
        this.form = res.data
        this.title = this.$t('modify')
        this.disabled = true
      } else {
        this.title = this.$t('add')
      }
      this.dialogVisible = true
      this.getLevelList()
      this.getEqpIdList()
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleUpdate() {
      this.$emit('initList')
    },
    getEqpIdList() {
      eqpnamelist().then(res => {
        this.eqpIdList = res.data
      })
    },
    async getLevelList() {
      const res = await getAllLevel()
      this.eqpIdList = res.data
    }
  }
}
</script>
